"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _utils = require("../utils");

var _constant = require("../utils/constant");

var _popup = require("../mixins/popup");

var _button = _interopRequireDefault(require("../button"));

var _createNamespace = (0, _utils.createNamespace)('dialog'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1],
    t = _createNamespace[2];

var _default = createComponent({
    mixins: [(0, _popup.PopupMixin)()],
    props: {
        title: String,
        width: [Number, String],
        message: String,
        className: null,
        callback: Function,
        beforeClose: Function,
        messageAlign: String,
        cancelButtonText: String,
        cancelButtonColor: String,
        confirmButtonText: String,
        confirmButtonColor: String,
        showCancelButton: Boolean,
        transition: {
            type: String,
            default: 'van-dialog-bounce'
        },
        showConfirmButton: {
            type: Boolean,
            default: true
        },
        overlay: {
            type: Boolean,
            default: true
        },
        closeOnClickOverlay: {
            type: Boolean,
            default: false
        }
    },
    data: function data() {
        return {
            loading: {
                confirm: false,
                cancel: false
            }
        };
    },
    methods: {
        onClickOverlay: function onClickOverlay() {
            this.handleAction('overlay');
        },
        handleAction: function handleAction(action) {
            var _this = this;

            this.$emit(action); // show not trigger close event when hidden

            if (!this.value) {
                return;
            }

            if (this.beforeClose) {
                this.loading[action] = true;
                this.beforeClose(action, function (state) {
                    if (state !== false && _this.loading[action]) {
                        _this.onClose(action);
                    }

                    _this.loading.confirm = false;
                    _this.loading.cancel = false;
                });
            } else {
                this.onClose(action);
            }
        },
        onClose: function onClose(action) {
            this.close();

            if (this.callback) {
                this.callback(action);
            }
        },
        onOpened: function onOpened() {
            this.$emit('opened');
        },
        onClosed: function onClosed() {
            this.$emit('closed');
        }
    },
    render: function render() {
        var _bem,
            _this2 = this,
            _ref;

        var h = arguments[0];

        if (!this.shouldRender) {
            return;
        }

        var message = this.message,
            messageAlign = this.messageAlign;
        var messageSlot = this.slots();
        var title = this.slots('title') || this.title;
        var Title = title && h("div", {
            "class": bem('header', {
                isolated: !message && !messageSlot
            })
        }, [title]);
        var Content = (messageSlot || message) && h("div", {
            "class": bem('content')
        }, [messageSlot || h("div", {
            "domProps": {
                "innerHTML": message
            },
            "class": bem('message', (_bem = {
                'has-title': title
            }, _bem[messageAlign] = messageAlign, _bem))
        })]);
        var hasButtons = this.showCancelButton && this.showConfirmButton;
        var ButtonGroup = h("div", {
            "class": [_constant.BORDER_TOP, bem('footer', {
                buttons: hasButtons
            })]
        }, [this.showCancelButton && h(_button.default, {
            "attrs": {
                "size": "large",
                "loading": this.loading.cancel,
                "text": this.cancelButtonText || t('cancel')
            },
            "class": bem('cancel'),
            "style": {
                color: this.cancelButtonColor
            },
            "on": {
                "click": function click() {
                    _this2.handleAction('cancel');
                }
            }
        }), this.showConfirmButton && h(_button.default, {
            "attrs": {
                "size": "large",
                "loading": this.loading.confirm,
                "text": this.confirmButtonText || t('confirm')
            },
            "class": [bem('confirm'), (_ref = {}, _ref[_constant.BORDER_LEFT] = hasButtons, _ref)],
            "style": {
                color: this.confirmButtonColor
            },
            "on": {
                "click": function click() {
                    _this2.handleAction('confirm');
                }
            }
        })]);
        return h("transition", {
            "attrs": {
                "name": this.transition
            },
            "on": {
                "afterEnter": this.onOpened,
                "afterLeave": this.onClosed
            }
        }, [h("div", {
            "directives": [{
                name: "show",
                value: this.value
            }],
            "attrs": {
                "role": "dialog",
                "aria-labelledby": this.title || message
            },
            "class": [bem(), this.className],
            "style": {
                width: (0, _utils.addUnit)(this.width)
            }
        }, [Title, Content, ButtonGroup])]);
    }
});

exports.default = _default;